<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="bootstrap-3.3.7/dist/css/bootstrap.css">
    <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
    <title>注册新用户</title>
</head>
<script>
    $(function() {
        var isNo = false;
        var init = function(dom) {
            dom.removeClass("has-success");
            dom.removeClass("has-error");
            var span = dom.find(".form-control-feedback");
            span.remove();
            var span2 = dom.find(".help-block")
            span2.remove();
        }
        $(".btn").on("click", function(e) {
            console.log(123);
            e.preventDefault();
            // 用户大于6
            var username = $("#username");
            var usernameP = username.parent();
            init(usernameP);

            if (username.val().length >= 6) {
                usernameP.addClass("has-success");
                var tick = '<span class="glyphicon glyphicon-ok form-control-feedback"></span>';
                usernameP.append($(tick));;
                var help = '<span class="help-block">输入用户名正确</span>';
                usernameP.append($(help));
                isNo = true;

            } else {
                usernameP.addClass("has-error");
                var tick = '<span class="glyphicon glyphicon-remove form-control-feedback"></span>';
                usernameP.append($(tick));;
                var help = '<span class="help-block">用户名少于6个字母或数字请重新输入</span>';
                usernameP.append($(help));
                isNo = false;
                return isNo;
            }
            // 密码大于12          
            var password = $("#password");
            var passwordP = password.parent();
            init(passwordP);
            if (password.val().length >= 12) {
                passwordP.addClass("has-success");
                var tick = '<span class="glyphicon glyphicon-ok form-control-feedback"></span>';
                passwordP.append($(tick));;
                var help = '<span class="help-block">输入密码正确</span>';
                passwordP.append($(help));
                isNo = true;

            } else {
                passwordP.addClass("has-error");
                var tick = '<span class="glyphicon glyphicon-remove form-control-feedback"></span>';
                passwordP.append($(tick));;
                var help = '<span class="help-block">用密码少于12个字母或数字请重新输入</span>';
                passwordP.append($(help));
                isNo = false;
                return isNo;
            }
            // 确认密码
            var passwordAgain = $("#passwordagain");
            var passwordAgainP = passwordAgain.parent();
            init(passwordAgainP);
            if (passwordAgain.val() === password.val()) {
                passwordAgainP.addClass("has-success");
                var tick = '<span class="glyphicon glyphicon-ok form-control-feedback"></span>';
                passwordAgainP.append($(tick));;
                var help = '<span class="help-block">密码一致</span>';
                passwordAgainP.append($(help));
                isNo = true;

            } else {
                passwordAgainP.addClass("has-error");
                var tick = '<span class="glyphicon glyphicon-remove form-control-feedback"></span>';
                passwordAgainP.append($(tick));;
                var help = '<span class="help-block">密码不一致请重新输入</span>';
                passwordAgainP.append($(help));
                isNo = false;
                return isNo;
            }
            //注册是否成功
            console.log(isNo);
            if (isNo == true) {
                alert("注册成功");
            }

        })

    })
</script>

<body>
    <form>
        <div class="form-group has-feedback">
            <label for="username">用户名</label>
            <input type="text" class="form-control" id="username"></input>
        </div>
        <div class="form-group has-feedback">
            <label for="password">密码</label>
            <input type="text" class="form-control" id="password"></input>
        </div>
        <div class="form-group  has-feedback">
            <label for="passwordagain">确认密码</label>
            <input type="text" class="form-control" id="passwordagain"></input>
        </div>
        <button class="btn btn-primary">注册</button>
    </form>
</body>

</html>